<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>万表网注册</title>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/register.css" />
		<script src="js/jquery-3.5.0.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 导航部分开始 -->
		<div class="nav">
			<div class="w">
				<ul class="nav_left fl">
					<li>
						<a href="#">正品保障，免息分期!</a>
					</li>
				</ul>
				<ul class="nav_right">
					<li>
						<a href="#">购物车</a>
					</li>
					<li>
						<a href="#">客户服务</a>
					</li>
					<li>
						<a href="#">会员福利</a>

					</li>
					<li>
						<span>|</span>
					</li>
					<li>
						<a href="#">ENGLISH</a>
					</li>
				</ul>
			</div>
		</div>
		<!-- 导航部分结束 -->

		<div class="zc_header w">
			<!-- 头部logo部分 -->
			<div class="zc_header_left fl">
				<h1 class="zc_logo fl">
					<a href="#">
						<img src="image/logo.png" />
					</a>
				</h1>
				<a href="#" class="zc_logo_text">
					<h1>全球名表专业大平台</h1>
				</a>
			</div>
		</div>
		<!-- 注册内容部分开始 -->
		<div class="zc_box">
			<div class="zc_box_content">
				<h5>注册万表会员</h5>
				<div class="content_box w">
					<form action="zhuceshujuku.php" method="post" novalidate="novalidate">
						<p>
							<em class="icon_phone"></em>
							<input type="text" class="tel" placeholder="请输入手机号码" maxlength="11" name="tel" />
						</p>
						<span class="sp1">请输入您的手机号</span>
						<p>
							<em class="icon_code"></em>
							<input type="text" class="yzm fl" placeholder="请输入图形验证码" maxlength="4" />
							<img src="img/图形验证码1.png" />
						</p>
						<span class="sp2">请输入验证码</span>
						<p>
							<em class="icon_code"></em>
							<input type="text" class="yzm dx fl" placeholder="请输入短信验证码" maxlength="6" />
							<a href="javascript:;" class="hq">获取验证码</a>
						</p>
						<p class="possword">
							<em class="icon_pwd"></em>
							<input type="password" placeholder="请设置密码" class="pwd" name="pwd" />
							<i class="icon_eye_close"></i>
						</p>
						<span class="sp3">密码应为6-20位任意字符组合</span>
						<p class="possword">
							<em class="icon_pwd"></em>
							<input type="password" placeholder="请再次输入密码" name="repwd" />
							<i class="icon_eye_close"></i>
						</p>
						<input type="submit" value="立即注册" class="register" style="padding: 0px;">
						<p class="agreement">
							点击“立即注册”，即表示您同意并愿意遵守
							<a href="#">万表网用户协议</a>
						</p>
					</form>

				</div>
			</div>
		</div>
		<!-- 注册内容部分结束 -->
		<!-- 登录注册底部部分开始 -->
		<div class="footer_bottom">
			<div class="w">
				<div class="footer_bottom_b">
					<p>&copy;万表网名表商城 版权所有 2009-2021 </p>
					<p>广州市万表科技股份有限公司 地址:广州市番禺区番禺大道北16号</p>
					<p>Copyright 2009-2021 WWW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
				</div>
			</div>
		</div>
		<!-- 登录注册底部部分结束 -->
		<script type="text/javascript">
			// 输入手机号开始
			// 获取元素
			var tel = document.querySelector('.tel');
			var sp1 = document.querySelector('.sp1');
			var eye = document.querySelector('i');
			// 设置正则
			var reg1 = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
			// 点击输入框时
			tel.onclick = function() {
				sp1.style.display = 'none';
			}
			// 离开输入框时
			tel.onblur = function() {
				if (reg1.test(this.value)) {
					sp1.style.display = 'none';
				} else {
					sp1.style.display = 'block';
				}
			}
			// 输入手机号结束

			// 图形验证码开始
			// 获取元素
			var txyzm = document.querySelector('.yzm');
			var sp2 = document.querySelector('.sp2');
			// 设置正则
			var reg2 = /CS2S$/;
			// 点击输入框时
			txyzm.onclick = function() {
				sp2.style.display = 'none';
			}
			// 离开输入框时
			txyzm.onblur = function() {
				if (reg2.test(this.value)) {
					sp2.style.display = 'none';
				} else {
					sp2.style.display = 'block';
				}
			}
			// 图形验证码结束
			
			// 发送验证码开始
			// 获取元素
			var hq = document.querySelector('.hq');
			// 设置时间
			var time = 5;
			// 点击按钮时
			hq.addEventListener('click', function() {
				hq.disabled = true;
				var timer = setInterval(function() {
					if (time == 0) {
						clearInterval(timer);
						hq.disabled = false;
						hq.innerHTML = '发送验证码';
					} else {
						hq.innerHTML = '还剩下' + time + '秒';
						time--;
					}
				}, 1000)
			})
			// 发送验证码
			var timer = setInterval(function() {
				if (time == 0) {
					clearInterval(timer);
					alert("验证码发送成功，请注意查收" + "0125");
				}
			}, 1000)
			// 发送验证码结束

			// 密码开始
			// 获取元素
			var pwd = document.querySelector('.pwd');
			var sp3 = document.querySelector('.sp3');
			var a = 0;
			// 设置正则
			var reg3 = /^\w{6,20}$/;
			// 点击输入框时
			pwd.onclick = function() {
				sp3.style.display = 'none';
			}
			// 离开输入框时
			pwd.onblur = function() {
				if (reg3.test(this.value)) {
					sp3.style.display = 'none';
				} else {
					sp3.style.display = 'block';
				}
			}
			// 密码结束

			// 获取表单元素
			var form = document.querySelector('form');

			// 表单提交事件处理
			form.addEventListener('submit', function(e) {
				e.preventDefault();

				// 获取所有输入框和提示元素
				var tel = document.querySelector('.tel');
				var txyzm = document.querySelector('.yzm');
				var dxYzm = document.querySelector('.yzm.dx');
				var pwd = document.querySelector('.pwd');
				var repwd = document.querySelector('input[name="repwd"]');
				var sp1 = document.querySelector('.sp1');
				var sp2 = document.querySelector('.sp2');
				var sp3 = document.querySelector('.sp3');
				var sp4 = document.createElement('span');
				sp4.style.color = 'red';
				sp4.style.display = 'none';
				var pwdParent = repwd.parentElement;
				if (!pwdParent.querySelector('span:last-child')) {
					pwdParent.appendChild(sp4);
				}

				// 验证手机号
				var reg1 = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;
				if (!reg1.test(tel.value)) {
					sp1.style.display = 'block';
					return;
				}

				// 验证图形验证码
				var reg2 = /CS2S$/;
				if (!reg2.test(txyzm.value)) {
					sp2.style.display = 'block';
					return;
				}

				// 验证短信验证码是否为空
				if (!dxYzm.value) {
					var spDx = document.createElement('span');
					spDx.style.color = 'red';
					spDx.textContent = '请输入短信验证码';
					if (!dxYzm.parentElement.querySelector('span:last-child')) {
						dxYzm.parentElement.appendChild(spDx);
					}
					return;
				}

				// 验证密码
				var reg3 = /^\w{6,20}$/;
				if (!reg3.test(pwd.value)) {
					sp3.style.display = 'block';
					return;
				}

				// 验证两次密码是否一致
				if (pwd.value !== repwd.value) {
					sp4.textContent = '两次输入的密码不一致';
					sp4.style.display = 'block';
					return;
				}

				// 所有验证通过，弹出注册成功提示并跳转
				alert('注册成功！');
				window.location.href = './signin.html';
			});
		</script>
		<script type="text/javascript">
			$(".possword").on("click", ".icon_eye_close", function() {
				$(this).removeClass("icon_eye_close").addClass("icon_eye_open");
				$(this).prev().attr("type", "text");
			});
			$(".possword").on("click", ".icon_eye_open", function() {
				$(this).removeClass("icon_eye_open").addClass("icon_eye_close");
				$(this).prev().attr("type", "password");
			});
		</script>
	</body>
</html>
